<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课计划模块</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="demoTable">
    <input type="hidden" id="one"/>
    <input type="hidden" id="two"/>
    <input type="hidden" id="three"/>
    <input type="hidden" id="four"/>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script>


        var table2 = "";
        layui.use(['form', 'table', 'laydate'], function () {
            var form = layui.form;
            //获取table数据保存在变量中
            var table = layui.table;

            dateRender();


            //数据交互
            table2 = table.render({
                elem: '#test',
                url: '../../atsCurriculumController/selectAll',
                toolbar: '#headBtn',//开启头部工具栏，并为其绑定左侧模板
                title: '课计划数据表',
                /*  done: function (res, curr, count) {
                      $("table").css("width", "100%");
                  },*/
                cols: [[
                    //是否禁用拖拽列宽（默认false）unresize:true,是否禁用排序sort:true
                    {type: 'checkbox', title: '全选', fixed: 'left'},
                    {type: 'numbers', title: '排序'},//序列号 numbers
                    {field: 'curriculumName', title: '计划名称', width: 300},
                    {field: 'itemName', title: '运动项目名称', width: 120},
                    {field: 'coachName', title: '教练员姓名', width: 120},
                    {field: 'planDate', title: '制定时间', width: 160},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]],
                page: true
            });


            //监听头部工具栏事件
            table.on('toolbar(test)', function (obj) {

                var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'seachTable'://搜索
                        $("#one").val($("#trainer").val());
                        $("#two").val($("#curriculumName").val());
                        $("#three").val($("#startTime").val());
                        $("#four").val($("#endTime").val());
                        //执行重载
                        table2.reload({
                            url: '../../atsCurriculumController/selectAll',
                            where: {
                                trainer: $("#trainer").val(),
                                curriculumName: $("#curriculumName").val(),
                                startTime:
                                    $("#startTime").val(),
                                endTime:
                                    $("#endTime").val()
                            },
                            //第一页开始
                            page: {
                                curr: 1
                            }
                        });
                        $("#trainer").val($("#one").val());
                        $("#curriculumName").val($("#two").val());
                        $("#startTime").val($("#three").val());
                        $("#endTime").val($("#four").val());
                        dateRender();
                        break;

                }
                ;

            });

            //监听操作
            table.on('tool(test)', function (objs) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                    var data = objs.data; //获得当前行数据
                    var layEvent = objs.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = objs.tr; //获得当前行 tr 的DOM对象
                    if (layEvent === 'details') {
                        //iframe层
                        layer.open({
                            type: 2,
                            title: '查看详情',//标题
                            shadeClose: true,
                            shade: 0.3,//背景阴影
                            area: ['60%', '90%'],//大小
                            content: 'AtsPlanCurriculumDetails.html?curriculumId=' + data.curriculumId, //iframew的url
                            end: function () {

                                table2.reload();//刷新父页面;
                                dateRender();
                            }
                        });

                    }
                }
            );

            function tabs(nums) {
                element = parent.layui.element;
                var tabId = nums.attr('id');
                var falg = true;
                var li = parent.$("#top-tab li");
                $(li).each(function (i, element) {
                    if (nums.attr("lay-id") == tabId) {
                        falg = false;
                    }
                });
                if (falg == false) {
                    element.tabChange('demo', tabId);//切换到指定的Tab项
                } else {
                    element.tabAdd('demo', {
                        title: nums.attr("title")
                        ,
                        content: '<iframe name="iframe" width="100%" style="min-height: 640px;" scrolling="yes" frameborder="0" noresize="noresize" src="' + nums.attr("name") + '"></iframe>' //支持传入html
                        ,
                        id: nums.attr('id')
                    });
                    element.tabChange('demo', tabId);//切换到指定的Tab项
                }
            }

            function dateRender() {
                layui.use(['laydate'], function () {
                    laydate = layui.laydate;
                    //日期
                    laydate.render({
                        elem: '#startTime',
                        trigger: 'click',
                        type: 'date'
                    });

                    laydate.render({
                        elem: '#endTime',
                        trigger: 'click',
                        type: 'date'
                    });
                });
            }

        })
        ;

    </script>

</div>
</body>
<style>
    .details {
        color: #00aced;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    .layui-inline {
        width: 12%;
    }
</style>
<script type="text/html" id="headBtn">

    教练员姓名:
    <div class="layui-inline">
        <input class="layui-input" name="trainer" id="trainer" placeholder="请输入关键字" autocomplete="off">
    </div>
    计划名称:
    <div class="layui-inline">
        <input class="layui-input" name="curriculumName" id="curriculumName" placeholder="请输入关键字" autocomplete="off">
    </div>
    时间:
    <div class="layui-inline">
        <input class="layui-input" name="startTime" id="startTime" placeholder="开始时间" lay-verify="date"
               autocomplete="off">
    </div>
    -
    <div class="layui-inline">
        <input class="layui-input" name="endTime" id="endTime" placeholder="结束时间" lay-verify="date" autocomplete="off">
    </div>


    <input type="button" lay-event="seachTable" class="layui-btn layui-btn-normal layui-btn-sm" value="搜索"/>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">查看</a>
</script>


</html>